<!--
  功能：员工详情
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年06月09日 15:38:48
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="">
    <el-button
      type="text"
      round
      icon="el-icon-arrow-left"
      @click="goBack"
      content="详情页面"
      >返回</el-button
    >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first"
        ><el-card class="box-card">
          <div class="text item">
            <h4>用户名：{{ info.username }}</h4>
            <h4>姓 名：{{ info.realname }}</h4>
            <h4>性 别：{{ info.gender }}</h4>
            <h4>电 话：{{ info.telephone }}</h4>
            <h4>状 态：{{ info.status }}</h4>
          </div>
        </el-card></el-tab-pane
      >
      <el-tab-pane label="地址信息" name="two"
        ><el-card class="box-card">
          <div class="text item">
            <h4>
              地址：{{ baseInfo.province }}{{ baseInfo.city }}{{ baseInfo.area }}
               <br>联系电话：{{ baseInfo.telephone }}
            </h4>
          </div>
        </el-card></el-tab-pane
      >
      <el-tab-pane label="评论信息" name="third"
        ><el-card class="box-card">
          <div class="text item">
            <h4>评论：{{baseInfo.comment}}
            </h4>
          </div>
        </el-card></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script>
import request from "@/utils/request";
import { formatDate } from "@/utils/date";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      date: 1646461131351,
      id: "",
      activeName: "first",
      info: {},
      baseInfo: {},
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //查询数据
    load() {
      request.get("/waiter/findWaiterById?id=" + this.id).then((res) => {
        this.baseInfo = res.data;
      });
    },
    handleClick(tab, event) {
      this.load();
    },
    goBack() {
      // console.log("go back");
      this.$router.go(-1);
    },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.info = this.$route.query.row;
    this.id = this.$route.query.row.id;
    //console.log(this.$route.query.row);
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  filters: {
    // 时间格式自定义 只需把字符串里面的改成自己所需的格式
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy.MM.dd");
    },
    formatDate2(time) {
      let date = new Date(time);
      return formatDate(date, "hh:mm:ss");
    },
    formatDate3(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日 hh:mm:ss");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
